/** 
  特殊角色管理
*/
<template>
    <div>
        <condition-card @reset="reset" @search="onSubmit" label-width="150px">
            <el-form>
                <el-row :gutter="24" style="height: 50px">
                    <el-col :span="8">
                        <!-- 项目类别 -->
                        <el-form-item :label="$t('specialRoles.projectType')">
                            <el-select
                                v-model.trim="typeIdList"
                                clearable
                                filterable
                                multiple
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.projectType"
                                    :key="item.typeCode"
                                    :label="item.typeName"
                                    :value="item.typeCode"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 角色分类 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('specialRoles.roleList')">
                            <el-select
                                v-model.trim="queryForm.condition.userGroup"
                                clearable
                                filterable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.roleList"
                                    :key="item.userGroup"
                                    :label="item.userGroupName"
                                    :value="item.userGroup"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 工号/姓名 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('specialRoles.nameId')">
                            <el-input
                                v-model.trim="queryForm.condition.codeOrName"
                                placeholder=""
                                style="width: 100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 搜索框结束 -->

            <!-- 列表页开始 -->
        </condition-card>
        <el-card shadow="never" body-style="padding: 24px;">
            <h1 class="condition-title">{{ $t('specialRoles.ListOfspecialRole') }}</h1>
            <div class="sub-title">
                <div class="float-right" style="display: flex">
                    <el-dropdown @command="importData">
                        <el-button type="primary">
                            导入
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="import">导入数据</el-dropdown-item>
                            <el-dropdown-item command="downLoad">下载模板</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- 新增 -->
                    <el-button type="primary" @click="addMenu()">
                        {{ $t('base.addMenu') }}
                    </el-button>

                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :action="uploadUrl"
                        :data="uploadConfig.file"
                        :before-upload="beforeUpload"
                        :on-success="handlerUploadSuccess"
                        :on-error="handlerUploadError"
                        :show-file-list="false"
                        multiple
                        :file-list="uploadConfig.fileList"
                    >
                        <span slot="trigger" ref="uploadBtn" v-show="false"></span>
                    </el-upload>
                </div>
            </div>
            <edu-table
                :pagination="false"
                :order="true"
                stripe
                :data="dataList"
                size="mini"
            >
                <!-- 工号 -->
                <edu-table-column
                    :label="$t('specialRoles.teacherCode')"
                    prop="teacherCode"
                ></edu-table-column>
                <!-- 姓名 -->
                <edu-table-column
                    :label="$t('specialRoles.teacherName')"
                    prop="teacherName"
                ></edu-table-column>
                <!-- 所属学院 -->
                <edu-table-column
                    :label="$t('specialRoles.factulyName')"
                    prop="faculty"
                ></edu-table-column>
                <!-- 项目类别 -->
                <edu-table-column
                    :label="$t('specialRoles.typeId')"
                    prop="typeName"
                ></edu-table-column>
                <!-- 角色分类 -->
                <edu-table-column
                    :label="$t('specialRoles.userGroup')"
                    prop="userGroupName"
                ></edu-table-column>

                <edu-table-column :label="$t('base.operate')" fit width="200">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-button type="text" @click="editMenu(scope.row)">
                            {{ $t('base.editMenu') }}
                        </el-button>
                        <!-- 删除 -->
                        <el-button type="text" @click="deleteMenu(scope.row, 'delOne')">
                            {{ $t('base.deleteMenu') }}
                        </el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float: right; margin-top: 10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>

        <!-- 新增 编辑 弹窗  开始 -->
        <el-dialog
            :title="ifAddTittle"
            :visible.sync="centerDialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="500px"
        >
            <edu-form
                :model="addForm"
                ref="addForm"
                label-width="100px"
                label-position="left"
                :rules="rulesForm"
            >
                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- 工号 -->
                        <el-form-item :label="$t('specialRoles.teacherCode')" prop="teacherCode">
                            <select-For-Page
                                v-model="addForm.teacherCode"
                                :queryType="1"
                                :val="addForm.teacherCode"
                                :queryFaculty="queryFaculty"
                                @returnVal="getTeacherCode"
                            ></select-For-Page>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- 姓名 -->
                        <el-form-item :label="$t('specialRoles.teacherName')" prop="teacherName">
                            <el-input
                                v-model="addForm.teacherName"
                                maxlength="32"
                                disabled
                                class="topic-input-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- 所属学院 -->
                        <el-form-item :label="$t('specialRoles.factulyName')" prop="factulyName">
                            <el-input
                                v-model="addForm.factulyName"
                                maxlength="32"
                                disabled
                                class="topic-input-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- 项目类别 -->
                        <el-form-item :label="$t('specialRoles.typeId')" prop="typeId">
                            <el-select
                                v-model="addForm.typeId"
                                multiple
                                filterable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.projectType"
                                    :key="item.typeCode"
                                    :label="item.typeName"
                                    :value="item.typeCode"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="20">
                        <!-- 角色分类 -->
                        <el-form-item :label="$t('specialRoles.userGroup')" prop="userGroup">
                            <el-select v-model="addForm.userGroup" style="width: 100%">
                                <el-option
                                    v-for="item in options.roleList"
                                    :key="item.userGroup"
                                    :label="item.userGroupName"
                                    :value="item.userGroup"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <hr />

                <el-form-item>
                    <el-row :gutter="20" style="text-align: right; margin-right: 30px">
                        <el-button type="default" @click="closeCon">
                            {{ $t('schoolCourseTimeSet.cancel') }}
                        </el-button>
                        <el-button type="primary" @click="submit()">
                            {{ $t('base.onsubmit') }}
                        </el-button>
                    </el-row>
                </el-form-item>
            </edu-form>
        </el-dialog>
        <!-- 新增 编辑 弹窗  结束 -->

        <edu-export-dialog :title="$t('message.prompt')" ref="downloadRef"></edu-export-dialog>
    </div>
</template>
<script>
import specialRolesManageApi from 'common/src/api/specialRolesManage/specialRolesManage'
import selectForPage from './selectForPage'
export default {
    components: {
        'select-For-Page': selectForPage,
    },
    data() {
        return {
            ifAddTittle: '', // 新增、编辑弹窗 页面名称
            submitType: '', // 提交类型  add：新增  edit：编辑
            centerDialogVisible: false, // 是否显示新增、编辑弹框
            queryFaculty: '',
            uploadUrl: '/api/externalexchangeservice/roleManage/importSpecialRole',
            typeIdList: [],
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    typeId: [],
                    userGroup: '',
                    codeOrName: '',
                },
            },

            // 导入失败列表
            addForm: {
                teacherCode: '',
                teacherName: '',
                typeId: '',
                userGroup: '',
                factulyName: '',
            },
            dataList: [],

            uploadConfig: {
                fileList: [],
                file: '',
            },

            options: {
                projectType: [],
                roleList: [],
                teacherCode: [],
            },
            rulesForm: {
                teacherCode: [
                    {
                        required: true,
                        message: this.$t('base.choice'),
                        trigger: 'change',
                    },
                ],
                userGroup: [
                    {
                        required: true,
                        message: this.$t('base.choice'),
                        trigger: 'change',
                    },
                ],
                typeId: [
                    {
                        required: true,
                        message: this.$t('base.choice'),
                        trigger: 'change',
                    },
                ],
            },
        }
    },
    computed: {},
    created() {
        // 初始化列表页
        this.getListData()
        this.getProjectType()
        this.getRoleList()
    },
    methods: {
        // 获取项目类别下拉框
        getProjectType() {
            specialRolesManageApi.getProjectType().then((res) => {
                if (res.code === 200 && res.data) {
                    this.options.projectType = res.data
                }
            })
        },

        // 获取角色分类下拉框
        getRoleList() {
            specialRolesManageApi.getRoleList().then((res) => {
                if (res.code === 200 && res.data) {
                    this.options.roleList = res.data
                }
            })
        },
        // 获取所属学院、姓名
        getTeacherCode(val) {
            if (val) {
                this.addForm.teacherCode = val
                this.$refs['addForm'].clearValidate()
                specialRolesManageApi.getInfoById(val).then((res) => {
                    if (res.code === 200 && res.data) {
                        this.addForm.teacherName = res.data.teacherName
                        this.addForm.factulyName = res.data.faculty
                    }
                })
            } else {
                this.addForm.teacherCode = ''
                this.addForm.teacherName = ''
                this.addForm.factulyName = ''
            }
        },
        // 下载模板、导入数据
        importData(command) {
            if (command === 'downLoad') {
                specialRolesManageApi.downLoad().then((res) => {
                    specialRolesManageApi.downloadTemplate(res.data).then((resT) => {
                        this.$message({
                            // 删除成功
                            message: '下载成功',
                            type: 'success',
                        })
                    })
                })
            } else if (command === 'import') {
                this.$refs.uploadBtn.click()
            }
        },

        // 新增按钮 打开新增弹窗
        addMenu() {
            this.submitType = 'add'
            this.centerDialogVisible = true
            // 国际学术会议目录 - 新增
            this.ifAddTittle = this.$t('specialRoles.addRole')
            this.addForm = {
                teacherCode: '',
                teacherName: '',
                typeId: [],
                userGroup: '',
            }
            this.$nextTick(() => {
                this.$refs['addForm'].clearValidate()
            })
        },
        // 修改按钮 打开修改弹窗
        editMenu(row) {
            this.submitType = 'edit'
            this.centerDialogVisible = true
            // 国际学术会议目录 - 编辑
            this.ifAddTittle = this.$t('specialRoles.editRole')
            this.$nextTick(() => {
                this.$refs['addForm'].clearValidate()
            })
            this.addForm.id = row.id
            this.addForm.teacherCode = row.teacherCode
            this.addForm.teacherName = row.teacherName
            this.addForm.typeId = row.typeId.split(',')
            this.addForm.userGroup = row.userGroup
            this.addForm.factulyName = row.faculty
        },
        closeCon() {
            // 是否确认取消并关闭？
            this.$confirm(this.$t('base.makeSure'), '提示', {
                // 确定
                confirmButtonText: this.$t('base.sure'),
                // 取消
                cancelButtonText: this.$t('base.cancel'),
                type: 'warning',
            })
                .then(() => {
                    this.centerDialogVisible = false
                    this.getListData()
                })
                .catch(() => {})
        },

        // 删除目录
        deleteMenu(row) {
            let _this = this
            let parm = {
                id: row.id,
                teacherCode: row.teacherCode,
                teacherName: row.teacherName,
                typeId: row.typeId,
                userGroup: row.userGroup,
            }
            this.$delConfirm().then((_) => {
                specialRolesManageApi.deleteRole(parm).then((res) => {
                    if (res.code === 200) {
                        _this.$message({
                            // 删除成功
                            message: _this.$t('base.delSuccess'),
                            type: 'success',
                        })
                        _this.getListData()
                    }
                })
            })
        },

        // 重置筛选框
        reset() {
            this.queryForm = {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
                condition: {
                    typeId: [],
                    userGroup: '',
                    codeOrName: '',
                },
            }
            this.typeIdList = []
            this.getListData()
        },

        // 查询按钮
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.queryForm.total_ = 0
            this.queryForm.pageSize_ = 20
            this.getListData()
        },

        // 获取列表
        getListData() {
            let _this = this
            this.dataList = []
            if (this.typeIdList) {
                this.queryForm.condition.typeId = this.typeIdList.toString()
            } else {
                this.queryForm.condition.typeId = []
            }

            specialRolesManageApi.getList(this.queryForm).then((res) => {
                res.data.list.forEach((revList) => {
                    _this.dataList.push(revList)
                    _this.queryForm.pageSize_ = res.data.pageSize_
                    _this.queryForm.total_ = res.data.total_
                    _this.queryForm.pageNum_ = res.data.pageNum_
                })
            })
        },

        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getListData()
        },

        beforeUpload(file) {
            const fileSizeFlag = file.size && file.size / 1024 / 1024 < 10
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
            const uploadFlag = fileType === 'xls' || fileType === 'xlsx'
            if (!uploadFlag) {
                window.vueApp.showMsgBox({
                    message: this.$t('minor.approve.uploadFileError'),
                    callback: () => {},
                })
            }
            if (!fileSizeFlag) {
                window.vueApp.showMsgBox({
                    message: this.$t('minor.approve.uploadSizeError'),
                    callback: () => {},
                })
            }
            if (!(uploadFlag && fileSizeFlag)) {
                return false
            }
        },
        handlerUploadSuccess(response, file, fileList) {
            let responseCode = response.code
            let _this = this
            if (responseCode === 200) {
                // 导入成功
                _this.$message({
                    message: _this.$t('base.importSuccess'),
                    type: 'success',
                })
                this.uploadConfig.file = file
            } else if (response.msg) {
                _this.$message.error(response.msg)
            }
            this.getListData()
        },
        handlerUploadError(response, file, fileList) {
            this.$message({
                message: this.$t('graduateBase.uploadFail'),
                type: 'error',
            })
        },

        // 新增提交
        submit() {
            let _this = this
            this.$refs['addForm'].validate((valid) => {
                if (valid) {
                    if (_this.addForm.typeId) {
                        _this.addForm.typeId = _this.addForm.typeId.toString()
                    }
                    if (_this.submitType === 'add') {
                        specialRolesManageApi
                            .addRole(_this.addForm)
                            .then((res) => {
                                if (res.code === 200) {
                                    // 新增成功
                                    _this.$message({
                                        message: this.$t('base.addSuccess'),
                                        type: 'success',
                                    })
                                    _this.centerDialogVisible = false
                                    _this.getListData()
                                }
                            })
                            .catch((err) => {
                                _this.addForm.typeId = _this.addForm.typeId.split(',')
                            })
                    } else if (_this.submitType === 'edit') {
                        specialRolesManageApi
                            .editRole(_this.addForm)
                            .then((res) => {
                                if (res.code === 200) {
                                    // 编辑成功
                                    _this.$message({
                                        message: this.$t('base.editSuccess'),
                                        type: 'success',
                                    })
                                    _this.centerDialogVisible = false
                                    _this.getListData()
                                }
                            })
                            .catch((err) => {
                                _this.addForm.typeId = _this.addForm.typeId.split(',')
                            })
                    }
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.condition-card ::v-deep{
    .el-row {
        height: 30px !important;
    }
    .el-form-item {
        margin-bottom: 0 !important;
    }
}
.roster-container ::v-deep {
    .el-date-editor--datetimerange.el-input__inner {
        width: 100% !important;
    }
    .el-form {
        padding-right: 15px;
    }
}
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.sub-title {
    margin: 16px 0 65px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.yearSpan {
    margin-left: 50px;
    line-height: 32px;
    min-height: 33px;
    font-size: 14px;
    font-weight: normal;
}
</style>
